<template>
	<view class="container">
		<view class="tui-page__hd">
			<view class="tui-page__title">rotate-verify</view>
			<view class="tui-page__desc">旋转图片验证，可调整样式，可重置。</view>
		</view>
		<view class="tui-page__bd tui-page__spacing">
			<tui-button type="gray-primary" :size="34" bold width="372rpx" height="84rpx" margin="40rpx auto"
				@click="verify(1)">默认使用</tui-button>
			<tui-button type="gray-primary" :size="34" bold width="372rpx" height="84rpx" margin="40rpx auto"
				@click="verify(2)">重置换图</tui-button>
		</view>
		<tui-rotate-verify :type="1" ref="verify" :imgSrc="imgSrc" :angle="angle" :reset="reset" :show="show" @success="success" @error="error"
			@close="closeVerify" @result="result"></tui-rotate-verify>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				imgSrc: '/static/components/verify/rotate_verify.jpg',
				angle: 30,
				type: 1,
				reset: 0
			}
		},
		methods: {
			verify(type) {
				this.type = type;
				this.reset = 0;
				this.imgSrc = "/static/components/verify/rotate_verify.jpg";
				this.angle = 30;
				this.reset++;
				setTimeout(() => {
					this.show = true
				}, 50)
			},
			success() {
				this.tui.toast('验证成功！2s后自动关闭~')
				setTimeout(() => {
					this.closeVerify()
					this.reset++;
				}, 2000)
			},
			error() {
				if (this.type == 2) {
					//重置换图 这里图片可以从服务器获取随机图，初始角度可在区间内随机
					this.imgSrc = "/static/images/index/logo.png";
					this.angle = -120;
					this.reset++;
				}
				this.tui.toast('验证失败~')
			},
			closeVerify() {
				this.show = false
			},
			//type=2时生效
			result(e) {
				/*
				 结合后端校验
				1、后端将图片旋转一定角度返回给前端
				2、前端旋转后得到旋转角度传入后端进行校验图片角度是否为正
				*/
				console.log(e.angle)
				//重置
				// this.reset++;
				//关闭
				//this.closeVerify()
				//成功提示
				// this.$refs.verify.success()
				//失败提示
				// this.$refs.verify.error()
			}
		}
	}
</script>

<style>

</style>
